<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/video-js.css">
    <link rel="stylesheet" href="css/page1.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate2.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.js"></script>
    <script src="js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="js/scroll.js"></script>
    <script src="js/data.js"></script>
</head>
<body id="body">
    <div class="page0">
        <div class="video animated fadeIn">
            <video
                   controls
                   preload="auto"
                   data-setup="{}"
                   class="video-js video0Wrap"
                   id="my-video"
                   width="814px"
                   height="454px"
                   autoplay="autoplay"
                   style="object-fit: contain;"
                   webkit-playsinline="true"
                   playsinline="true"
                   crossorigin="anonymous"
                   x-webkit-airplay="true">
                <source src="video/2.mp4" type="video/mp4">
            </video>
            <p class="skip" id="skip">
                <span>跳过</span>
            </p>
        </div>
    </div>
    <div class="swiper-container swiper-no-swiping" id="swiper-container">
        <div class="swiper-wrapper">
            <div class="page1 swiper-slide" id="page1">
                <div class="animation">
                    <div class="personA animated fadeInLeft">
                        <img src="images/personA.png" alt="">
                    </div>
                    <div class="personB animated fadeInRight">
                        <img src="images/personB.png" alt="">
                    </div>
                </div>
                <div class="btn">
                    <a  class="btn1">
                        <!--<img src="images/button1.png" alt="">-->
                        <span>技术拥有方</span>
                    </a>
                    <a class="btn2">
                        <span>技术需求方</span>
                    </a>
                </div>
            </div>
            <div class="page2 swiper-slide" id="page2">
                <div class="video2 ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s"
                     swiper-animate-delay="0.3s">
                    <video
                            controls
                            preload="auto"
                            data-setup="{}"
                            class="video-js video2Wrap"
                            id="my-video1"
                            width="814px"
                            height="454px"
                            style="object-fit: contain;"
                            webkit-playsinline="true"
                            playsinline="true"
                            crossorigin="anonymous"
                            x-webkit-airplay="true">
                        <source src="video/2.mp4" type="video/mp4">
                    </video>
                    <p class="skip" >
                        <span id="page2Skip">跳过</span>
                    </p>
                </div>
                <div class="animation2">
                    <div class="personC ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.6s">
                        <img src="images/personC.png" alt="">
                    </div>
                    <div class="personD ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.6s">
                        <img src="images/personD.png" alt="">
                    </div>
                </div>
            </div>
            <div class="page3 swiper-slide" id="page3">
                <div class="animation3">
                    <div class="personE   ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.3s">
                        <img src="images/personE.png" alt=""  >
                    </div>
                    <div class="personF ani " swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.3s">
                        <img src="images/personF.png" alt="">
                    </div>
                </div>
                <div class="page3Btn">
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.6s" id="cooperation">
                        我有技术，找合作
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.7s" id="join">
                        我是人才，要加盟
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.8s" id="build">
                        我有情怀，来建所
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.9s" id="createCompany">
                        我想创业，建公司
                    </a>
                </div>
            </div>
            <div class="page4 swiper-slide" id="page4">
                <div class="video3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s"
                     swiper-animate-delay="0.3s">
                    <video
                            controls
                            preload="auto"
                            data-setup="{}"
                            class="video-js video4Wrap"
                            id="my-video2"
                            width="814px"
                            height="454px"
                            style="object-fit: contain;"
                            webkit-playsinline="true"
                            playsinline="true"
                            crossorigin="anonymous"
                            x-webkit-airplay="true">
                        <source src="video/2.mp4" type="video/mp4">
                    </video>

                    <p class="backBtn" id="backBtn">
                        <span>返回</span>
                    </p>
                </div>
                <div class="page4Btn page4Choise">
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                        swiper-animate-delay="0.6s">
                        新材料
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                        swiper-animate-delay="0.7s">
                        电子信息
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.9s">
                        装备制造
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="1.1s">
                        生物医药
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="1.2s">
                        节能环保
                    </a>
                </div>
            </div>
            <div class="page5 swiper-slide" id="page5">
                <div class="container ani" id="container" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.3s"
                     swiper-animate-delay="0.6s">
                    <div class="prev">
                        <span id="prev">
                            <img src="images/prev.png" alt="">
                        </span>
                    </div>
                    <div class="next">
                        <span id="next">
                            <img src="images/next.png" alt="">
                        </span>
                    </div>
                    <div class="ul">
                        <ul>
                            <li>
                                <div class="top">
                                    <img src="images/list1.png" alt="">
                                    <p>
                                        电子信息
                                    </p>
                                </div>
                                <div class="listItem">
                                    <p><a data-id="0">无线通信与信息传输技术研究所</a></p>
                                    <p><a data-id="1">未来网络技术研究所</a></p>
                                    <p><a data-id="2"> 移动通信技术研究所</a></p>
                                    <p><a data-id="3"> 专用集成电路技术研究所</a></p>
                                    <p><a data-id="4"> 半导体封装技术研究所</a></p>
                                    <p><a data-id="5"> 国家超级计算无锡中心</a></p>
                                    <p><a data-id="6"> *智能液晶技术研究所</a></p>
                                    <p><a data-id="7"> *有机光电技术研究所</a></p>
                                    <p><a data-id="8"> *智能传感技术研究所</a></p>
                                </div>
                            </li>
                            <li >
                                <div class="top">
                                    <img src="images/list2.png" alt="">
                                    <p>
                                        装备制造
                                    </p>
                                </div>
                                <div class="listItem">
                                    <p><a data-id="9">水环境工程技术研究所（宜兴）</a></p>
                                    <p><a data-id="10">水环境工程技术研究所（盐城）</a></p>
                                    <p><a data-id="11">   *工业过程模拟与优化研究所</a></p>
                                </div>
                            </li>
                            <li >
                                <div class="top">
                                    <img src="images/list3.png" alt="">
                                    <p>
                                        生物医药
                                    </p>
                                </div>
                                <div class="listItem">
                                    <p><a data-id="12">生物材料与医疗器械研究所</a></p>
                                    <p><a data-id="13">工业生物技术研究所</a></p>
                                    <p><a data-id="14">  转化医学与创新药物技术研究所</a></p>
                                    <p><a data-id="15"> 医药生物技术研究所</a></p>
                                    <p><a data-id="16"> 生物医学工程技术研究所</a></p>
                                    <p><a data-id="17"> 食品生物技术研究所</a></p>
                                    <p><a data-id="18"> *脑空间信息技术研究所</a></p>
                                    <p><a data-id="19"> *生物大分子药物研究所</a></p>
                                    <p><a data-id="20"> *新型药物制剂技术研究所</a></p>
                                </div>
                            </li>
                            <li >
                                <div class="top">
                                    <img src="images/list4.png" alt="">
                                    <p>
                                        节能环保
                                    </p>
                                </div>
                                <div class="listItem">
                                    <p><a data-id="21"> 先进激光技术研究所</a></p>
                                    <p><a data-id="22"> 精密与微细制造技术研究所</a></p>
                                    <p><a data-id="23">数字制造装备与技术研究所</a></p>
                                    <p><a data-id="24">机器人与智能装备技术研究所</a></p>
                                    <p><a data-id="25"> 先进汽车技术研究所</a></p>
                                    <p><a data-id="26"> 流体工程装备技术研究所</a></p>
                                    <p><a data-id="27"> *智能制造技术研究所</a></p>
                                    <p><a data-id="28">*道路工程技术与装备研究所</a></p>
                                    <p><a data-id="29"> *新能源汽车技术研究所</a></p>
                                </div>
                            </li>
                            <li >
                                <div class="top">
                                    <img src="images/list5.png" alt="">
                                    <p>
                                        新材料
                                    </p>
                                </div>
                                <div class="listItem">
                                    <p><a data-id="30">膜科学技术研究所</a></p>
                                    <p><a data-id="31"> 碳纤维及复合材料研究所</a></p>
                                    <p><a data-id="32"> 石墨烯材料研究所</a></p>
                                    <p><a data-id="33"> 纳米材料与器件研究所</a></p>
                                    <p><a data-id="34"> 纺织丝绸技术研究所</a></p>
                                    <p><a data-id="35"> *先进冶金技术研究所</a></p>
                                    <p><a data-id="36"> *北大分子工程苏南研究院</a></p>
                                    <p><a data-id="37"> *先进高分子材料技术研究所</a></p>
                                    <p><a data-id="38"> *先进金属材料及应用技术研究所</a></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="page4Btn ani nextScence" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s"
                     swiper-animate-delay="0.6s">
                    <a>下一场景</a>
                    <p class="tips">*表示为共建制研究所</p>
                </div>
                <div class="fixedTc">
                    <cite class="hideClose"><img src="images/close.png" alt=""></cite>
                    <h3>膜科学技术研究所</h3>
                    <p class="fixedContent">
                        2011年2月，由南京九思高科技有限公司出资1000万，依托南京工业大学国家特种分离膜工程技术研究中心及南京膜材料产业技术研究院共同建设，重点进行膜材料及相关行业发展中急需的产业共性技术研发。目前研发团队200人，其中领军人物5人，中国工程院院士1人，973项目首席专家3人，国家杰出青年基金获得者2人。研发场所面积13800平方米，仪器设备总值6100余万元，建有膜材料微观结构和宏观性能测试平台、中试放大平台、工程化实验平台，组建了江苏膜科技产业园和膜产业投资基金。
                    </p>
                   <div class="nextBottom">
                       <span class="nextScenceBtn"></span>
                   </div>
                </div>
                <div class="hideTanc">

                </div>
            </div>
            <div class="page6 swiper-slide" id="page6">
                <div class="video3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.3s"
                     swiper-animate-delay="0.6s">
                    <video
                            controls preload="auto"
                            data-setup="{}"
                            class="video-js video6Wrap"
                            id="my-video3"
                            width="814px"
                            height="454px"
                            style="object-fit: contain;"
                            webkit-playsinline="true"
                            playsinline="true"
                            crossorigin="anonymous"
                            x-webkit-airplay="true">
                        <source src="video/2.mp4" type="video/mp4">
                    </video>
                    <p class="backBtn" id="backBtn2">
                        <span>重新选择</span>
                    </p>
                </div>
            </div>
            <div class="page7 swiper-slide" id="page7">
                <div class="video7">
                    <video src=""></video>
                    <p class="backBtn" >
                        <span class="page7Btn">下一场景</span>
                    </p>
                </div>
                <div class="animation7">
                    <div class="left ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.2s"
                         swiper-animate-delay="0.3s">
                        <div class="personG">
                            <img src="images/personG.png" alt="">
                        </div>
                        <div class="personH">
                            <img src="images/personH.png" alt="">
                        </div>
                    </div>
                    <div class="right" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.2s"
                         swiper-animate-delay="0.3s">
                        <div class="personI">
                            <img src="images/personI.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="page8 swiper-slide" id="page8">
                <div class="video8">
                    <video src=""></video>
                    <p class="backBtn">
                        <span class="page8Btn">下一场景</span>
                    </p>
                </div>
            </div>
            <div class="page9 swiper-slide" id="page9">
                <div class="video9 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s"
                     swiper-animate-delay="0.3s">
                    <p class="backBtn" >
                        <span class="page9Btn">下一场景</span>
                    </p>
                </div>
            </div>
            <div class="page10 swiper-slide" id="page10">
                <div class="video2 ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s"
                     swiper-animate-delay="0.3s">
                    <video>
                    </video>
                    <p class="skip" >
                        <span id="page10Skip">跳过</span>
                    </p>
                </div>
                <div class="animation2">
                    <div class="personC ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.6s">
                        <img src="images/personX.png" alt="">
                    </div>
                    <div class="personD ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.6s">
                        <img src="images/personY.png" alt="">
                    </div>
                </div>
            </div>
            <div class="page11 swiper-slide" id="page11">
                <div class="animation11">
                    <div class="personE   ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.3s">
                        <img src="images/personE.png" alt=""  >
                    </div>
                    <div class="personF ani " swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                         swiper-animate-delay="0.3s">
                        <img src="images/personF.png" alt="">
                    </div>
                </div>
                <div class="page11Btn">
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.6s" >
                        <p>我有技术难题</p>
                        <p>要找解决方案</p>
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.7s" >
                        <p>
                            我要转型升级
                        </p>
                        <p>
                            寻找战略合作
                        </p>
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.8s" >
                        <p>
                            我是投资者
                        </p>
                        <p>
                            找适于投资的项目
                        </p>
                    </a>
                    <a class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s"
                       swiper-animate-delay="0.9s" >
                        <p>
                            我是园区
                        </p>
                        <p>
                            想要招商引智
                        </p>
                    </a>
                </div>
            </div>
            <div class="page12 swiper-slide" id="page12">
                <div class="video3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s"
                     swiper-animate-delay="0.3s">
                    <video>
                    </video>
                    <p class="backBtn" id="backBtn3" >
                        <span>重新选择</span>
                    </p>
                </div>

            </div>
        </div>
    </div>
    <!--<script src="js/video.min.js"></script>-->
    <!--<script src="http://vjs.zencdn.net/5.19/lang/zh-CN.js"></script>-->
    <script type="text/javascript">
//        var myPlayer = videojs('my-video');
//        videojs("my-video").ready(function(){
//            var myPlayer = this;
//            myPlayer.play();
//        });
//        var myPlayer1 = videojs('my-video1');
//        videojs("my-video1").ready(function(){
//            var myPlayer1 = this;
//            myPlayer1.play();
//        });
//        var myPlayer2 = videojs('my-video2');
//        videojs("my-video2").ready(function(){
//            var myPlayer2 = this;
//            myPlayer2.play();
//        });
//        var myPlayer3 = videojs('my-video3');
//        videojs("my-video3").ready(function(){
//            var myPlayer3 = this;
//            myPlayer3.play();
//        });
    </script>
    <script>

    var windowWidth =screen.width
    var windowHeight =screen.height
    var scale =document.body.clientHeight/980
    var page2Skip =document.getElementById('page2Skip')
    var skip =document.getElementById('skip')
    function fullScreen(element) {
        if(element.requestFullScreen) {
            element.requestFullScreen();
        } else if(element.webkitRequestFullScreen ) {
            element.webkitRequestFullScreen();
        } else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
    }
        skip.addEventListener('click',function () {
            $('#swiper-container').show()
            $('.page0').hide();
            var myVideo =document.getElementById('my-video')
            myVideo.pause();
            var swiperContainer =document.getElementById('swiper-container')
            var myVideo1 =document.getElementById('my-video1')
            var myVideo2 =document.getElementById('my-video2')
            var myVideo3 =document.getElementById('my-video3')
            fullScreen(swiperContainer)
            var mySwiper = new Swiper ('.swiper-container', {
                on:{
                    init: function(){
                        swiperAnimateCache(this); //隐藏动画元素
                        swiperAnimate(this); //初始化完成开始动画
                    },
                    slideChangeTransitionEnd: function(){
                        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    },
                    slideChangeTransitionStart :function () {
                        if(this.activeIndex==0){
                            myVideo1.pause()
                            myVideo2.pause()
                            myVideo3.pause()
                        }else if(this.activeIndex==1){
                            myVideo1.play()
                            myVideo2.pause()
                            myVideo3.pause()

                        }else if(this.activeIndex==2){
                            myVideo1.pause()
                            myVideo2.pause()
                            myVideo3.pause()
                        }else if(this.activeIndex==3){
                                myVideo1.pause()
                                myVideo2.play()
                                myVideo3.pause()

                        }else if(this.activeIndex==4){
                            myVideo1.pause()
                            myVideo2.pause()
                            myVideo3.pause()
                            if(mySwiper.previousIndex ==2){
                                $('.nextScence').click(function () {
                                    mySwiper.slideTo(6,0,true)
                                })
                            }
                        }else if(this.activeIndex==5){
                            myVideo1.pause()
                            myVideo2.pause()
                            myVideo3.play()
                        }
                    }
                },
                direction: 'vertical',
                loop: false,
            })
            $('.btn1').click(function () {
                mySwiper.slideTo(1,0,true)
            })
            $('.btn2').click(function () {
                mySwiper.slideTo(9,0,true)
            })
            $('#backBtn2,#backBtn3').click(function () {
                mySwiper.slideTo(0,0,true)
            })
            $('#page2Skip').click(function () {
                mySwiper.slideNext(0)
            })
//            $('.page3Btn a').click(function () {
//                mySwiper.slideNext(0)
//            });
//            page3Btn
            //第三页场景 合作
            $('.page3Btn #cooperation').click(function () {
                mySwiper.slideNext(0)
            })
            //加盟
            $('.page3Btn #join').click(function () {
                mySwiper.slideTo(4,0,true)
            })

            //建所
            $('.page3Btn #build').click(function () {
                mySwiper.slideTo(7,0,true)
            })
            $('.page7Btn').click(function () {
                mySwiper.slideTo(5,0,true)

            })
            $('.page8Btn').click(function () {
                mySwiper.slideTo(9,0,true)
            })
            $('.page9Btn').click(function () {
               mySwiper.slideTo(5,0,true)
            })
            $('#page10Skip').click(function () {
                mySwiper.slideTo(10,0,true)
            })
            $('.page11Btn').click(function () {
                mySwiper.slideTo(11,0,true)
            })
            //第三页场景 办公司
            $('.page3Btn #createCompany').click(function () {
                mySwiper.slideTo(8,0,true)
            })
//            $('.backBtn').click(function () {
//                mySwiper.slidePrev(0)
//            });
            $('.page4Choise a').each(function (index,e) {
                $(e).click(function () {
                    mySwiper.slideNext(0)
                })
            })
            $('.nextScence a').click(function () {
                mySwiper.slideNext(0)
            })
            $('.listItem a').click(function () {
                var id =$(this).data('id')
                var $this =$(this)
                console.log($this.parent('p').siblings().find('a').html())
                $('.fixedTc').show()
                $('.hideTanc').show()
                $('.fixedTc .fixedContent').html(DataArr[id].msg)
               $('.fixedTc h3').html($(this).html())
                $('.nextScenceBtn').click(function () {
                    id++;
                    if(id==39){
                        id=0
                    }
                    $('.fixedTc .fixedContent').html(DataArr[id].msg)
                    $('.fixedTc h3').html(DataArr[id].title)
                })
            });
            $('.hideClose').click(function () {
                $('.fixedTc').hide()
                $('.hideTanc').hide()
            })
        },false)
    </script>
</body>
</html>